import React, { useState } from 'react'
import { Upload, message, Button, Modal } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { baseURL } from 'utils/request'
import { getToken } from 'utils/storage';
export default function TextPage() {
  const [imgUrl, setImgUrl] = useState('')
  const [fileList, setFileList] = useState([])
  const props = {
    name: 'image',
    accept: ".jepg,.jpg,.png",
    action: baseURL + '/v1_0/upload',
    headers: {
      authorization: 'Bearer' + getToken(),
    },
    onChange(info) {
      setFileList(info.fileList)
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    },
    onPreview(file){
      setImgUrl(file.thumbUrl)
    },

    beforeUpload(file) {
      const whiteList = ['image/jpg', 'image/png', 'image/jpeg']
      if (!whiteList.includes(file.type)) {
        message.warning("文件格式错误")
        return Upload.LIST_IGNORE
      }
    }
  };

  return (
    <div>
      <>
        <Upload {...props} listType="picture-card" fileList={fileList}>
        {
          fileList.length < 3 && <Button icon={<UploadOutlined />}></Button>
        }  
        </Upload>
        <Modal title="预览图片" visible={!!imgUrl} onCancel={() => setImgUrl("")} footer={null} centered={true}>
          <img width="400" src={imgUrl} alt="" />
        </Modal>
      </>
    </div>
  )
}
